import 'package:flutter/material.dart';

class Login extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LoginPage(title: '登录');
  }
}

class LoginPage extends StatefulWidget {
  LoginPage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final TextEditingController _controller = new TextEditingController();
  final TextEditingController _pwdController = new TextEditingController();

  bool pwdVisible = true;

  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // Row(
            //   mainAxisAlignment: MainAxisAlignment.center,
            //   // verticalDirection: VerticalDirection.,
            //   children: [
            //     Image.asset(
            //       "images/at.png",
            //       width: 24,
            //     ),
            //     // Spacer(),
            //     Expanded(
            //       child: TextField(
            //         controller: _controller,
            //         decoration: InputDecoration(
            //             hintText: "用户名",
            //             border: OutlineInputBorder(gapPadding: 0)
            //         ),
            //       ),
            //     )
            //   ],
            // ),
            Form(
                key: _formKey,
                child: Column(
                children: [
                  TextFormField(
                    // initialValue: "====",
                    decoration: const InputDecoration(
                      icon: Icon(Icons.person),
                      hintText: 'What do people call you?',
                      labelText: 'Name *',
                    ),
                    onSaved: (String value) {
                      // This optional block of code can be used to run
                      // code when the user saves the form.
                    },
                    validator: (String value) {
                      return (value != null && value.contains('@')) ? 'Do not use the @ char.' : null;
                    },
                    onChanged: (value) {

                    },
                  ),
                  Padding(
                    padding: const EdgeInsets.symmetric(vertical: 16.0),
                    child: ElevatedButton(
                      onPressed: () {
                        // Validate will return true if the form is valid, or false if
                        // the form is invalid.
                        if (_formKey.currentState.validate()) {
                          // Process data.
                        }
                      },
                      child: const Text('Submit'),
                    ),
                  ),
                ],
              )
            ),
            TextField(
              controller: _controller,
              decoration: InputDecoration(
                  hintText: "用户名",
                  border: OutlineInputBorder(gapPadding: 0)
              ),
            ),
            // Padding(
            //   padding: EdgeInsets.only(top: 10),
            //   child: Row(
            //     children: [
            //       Image.asset(
            //         "images/at.png",
            //         width: 24,
            //       ),
            //       Expanded(
            //         child: TextField(
            //           controller: _pwdController,
            //           decoration: InputDecoration(
            //               hintText: "密码",
            //               prefixIcon: ImageIcon(
            //                   AssetImage(
            //                     "images/at.png",
            //                   ),
            //                     // size: 24,
            //               ),
            //               suffixIcon: Icon(Icons.password_outlined,)
            //           ),
            //           keyboardType: TextInputType.visiblePassword,
            //           obscureText: true,
            //         ),
            //       ),
            //     ],
            //   ),
            // ),
            TextField(
              controller: _pwdController,
              decoration: InputDecoration(
                  hintText: "密码",
                  prefixIcon: Icon(Icons.password_outlined,),
                  suffixIcon: IconButton(
                      onPressed: () {
                        setState(() {
                          pwdVisible = !pwdVisible;
                        });
                      },
                      // iconSize: 12,
                      // padding: EdgeInsets.all(0),
                      icon: Icon(Icons.remove_red_eye_rounded, )),
                  border: OutlineInputBorder(gapPadding: 0)
              ),
              keyboardType: TextInputType.visiblePassword,
              obscureText: pwdVisible,
            ),
            ElevatedButton(
                onPressed: () {
                  Navigator.pushNamed(context, '/home');
                },
                child: Text("登录"))
          ],
        ),
      ),
    );
  }
}
